import React, { Component } from 'react';
import "./App.scss"
class App extends Component {
  state = {
    author:"",
    content:"",
    // [{author:"张三",content:"(*^_^*)"}]
    list:[

    ]
  }
  // 合并多个输入的问题
  handleChange = (e) => {
    console.log(e.target.dataset.name);
    let name = e.target.dataset.name;// author/content 
    this.setState({
      // key:value
      //[key+1]:value
      // [name] => author/content
      [name]:e.target.value
    })
  }
  // 点击添加评论的时候
  handleAdd = ()=>{
    console.log(this.state.author);
    console.log(this.state.content);
    let list = this.state.list;
    list.push({
      id:Date.now(),
      author: this.state.author,
      content:this.state.content
    })
    this.setState({
      list
    },()=>{
      console.log(this.state.list);
    })
  }
  render() {
    return (
      <div className="comments">
        <input data-name="author" className="comments-text" value={this.state.author} onChange={this.handleChange} type="text"  placeholder="请输入评论人"/>
        <textarea data-name="content" rows="10" value={this.state.content} onChange={this.handleChange} className="comments-textarea" type="textarea" placeholder="请输入评论内容"></textarea>
        <button className="comments-btn" onClick={this.handleAdd}>发布评论</button>
        <div className="comments-list">
          {
            this.state.list.map((v)=>(
              <div key={v.id}>
                <div>评论人：{v.author}</div>
                <div>评论内容：{v.content}</div>
              </div>
            ))
          }
        </div>
      </div>
    );
  }
}

export default App;
